<template>
  <div class="page-container">
    <div class="main">
      <div class="item-container">
        <div class="item-col-container">
          <el-descriptions title="系统信息" :column="1" style="margin-left: 20px">
            <el-descriptions-item label="操作系统">{{ os.osName }}</el-descriptions-item>
            <el-descriptions-item label="CPU">{{ os.cpuName }}</el-descriptions-item>
            <el-descriptions-item label="CPU物理核心数">{{ os.physical }}</el-descriptions-item>
            <el-descriptions-item label="CPU逻辑核心数">{{ os.logical }}</el-descriptions-item>
            <el-descriptions-item label="JAVA版本">{{ os.javaVersion }}</el-descriptions-item>
            <el-descriptions-item label="JAVA路径">{{ os.javaPath }}</el-descriptions-item>
            <el-descriptions-item label="MYSQL地址">{{ os.mysql }}</el-descriptions-item>
            <el-descriptions-item label="MYSQL驱动">{{ os.mysqlType }}</el-descriptions-item>
            <el-descriptions-item label="REDIS地址">{{ os.redis }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="item-container">
        <div class="item-col-container">
          <div class="disk-container">
            <div class="disk-item" v-for="(item,index) in disk" :key="index">
              <p>磁盘{{ index }}信息,磁盘名:{{ item.name }},磁盘格式:{{ item.mode }},挂载路径:{{ item.path }}</p>
              <el-progress :text-inside="true" :stroke-width="24" :percentage="getDiskValue(item.used, item.total)"
                           status="success"></el-progress>
            </div>
          </div>
        </div>
      </div>

      <div class="item-container">
        <div class="item-col-container">
          <ve-line :data="cpuData" height="400px" :grid="memoryGrid"
                   :settings="cpuSetting" :data-empty="dataEmpty"></ve-line>
        </div>
      </div>
    </div>

    <div class="item-col-container">
      <ve-line :data="memoryData" height="400px" :grid="memoryGrid"
               :settings="memorySetting" :data-empty="dataEmpty"></ve-line>
    </div>
  </div>
</template>

<script>
export default {
  name: "SystemInfo",
  mounted() {
    this.getOsInfo()
    this.getDiskInfo()
    this.connectCpuLoad()
    this.connectMemoryInfo()
  },
  data: function () {
    this.memorySetting = {
      max: [100, 100, 100]
    };
    this.cpuSetting = {
      max: [100],
      area: true
    }
    this.memoryGrid = {
      show: true,
      backgroundColor: '#fff'
    };
    return {
      os: {
        osName: '未知',
        cpuName: '未知',
        physical: '未知',
        logical: '未知',
        javaVersion: '未知',
        javaPath: '未知'
      },
      disk: [],
      memoryConnection: undefined,
      cpuLoadConnection: undefined,
      dataEmpty: false,
      memoryData: {
        columns: ['time', '可用物理内存', '交换区已用内存', 'JVM可用内存'],
        rows: []
      },
      cpuData: {
        columns: ['time', 'CPU占用'],
        rows: []
      }
    }
  },
  methods: {
    getOsInfo() {
      this.$AxiosUtil.get('/system/sysInfo/os').then(res => {
        if (res.code === 200) {
          this.os = res.data
        }
      })
    },
    getDiskInfo() {
      this.$AxiosUtil.get('/system/sysInfo/disk').then(res => {
        if (res.code === 200) {
          this.disk = res.data
        }
      })
    },
    getDiskValue(v1, v2) {
      if (v2 && v2 !== 0) {
        let value = v1 / v2;
        return (value * 100).toFixed(2)
      } else {
        return 0
      }
    },
    connectMemoryInfo() {
      this.memoryConnection = new EventSource('http://127.0.0.1:9600/system/sysInfo/memory');
      this.memoryConnection.addEventListener('memory', res => {
        let data = res.data;
        if (data) {
          data = JSON.parse(data);
          let memoryRate = ((data.free / data.total) * 100).toFixed(2)
          let swapRate = ((data.swapUsed / data.swapTotal) * 100).toFixed(2)
          let jvmRate = ((data.jvmFree / data.jvmTotal) * 100).toFixed(2)
          this.memoryData.rows.push({time: data.time, '可用物理内存': memoryRate, '交换区已用内存': swapRate, 'JVM可用内存': jvmRate})
          if (this.memoryData.rows.length > 10) {
            this.memoryData.rows.shift()
          }
        }
      })
    },
    connectCpuLoad() {
      this.cpuLoadConnection = new EventSource('http://127.0.0.1:9600/system/sysInfo/cpuLoad');
      this.cpuLoadConnection.addEventListener('cpuLoad', res => {
        let data = res.data;
        if (data) {
          data = JSON.parse(data);
          this.cpuData.rows.push({time: data.time, 'CPU占用': data.load})
          if (this.cpuData.rows.length > 10) {
            this.cpuData.rows.shift()
          }
        }
      })
    }
  },
  beforeDestroy() {
    if (this.cpuLoadConnection) {
      this.cpuLoadConnection.close()
    }
    if (this.memoryConnection) {
      this.memoryConnection.close()
    }
  }
}
</script>

<style scoped>
.main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  height: 50%;
  width: 100%;
}

.item-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: #ffffff
}

.item-col-container {
  width: 100%;
  margin-top: 20px;
  height: calc(50% - 20px);
  background-color: #ffffff;
}

.disk-container {
  display: flex;
  justify-content: flex-start;
  width: calc(100% - 40px);
  margin: 0 auto;
  flex-direction: column;
}

.disk-item {
  width: 100%;
}

</style>
